<template>
  <div class="bottom-charts">
    <dv-border-box-12 class="bc-chart-item">
      <div style="display:flex; flex-direction: column;">
        <div style="display: flex; align-items: center;">
          <dv-decoration-9 style="width:25px;height:25px;"></dv-decoration-9>
          <div class="bc-header">蜂箱参数列表</div>
        </div>
       <div class="content-container">
        <BottomData />
       </div>
      </div>
    </dv-border-box-12>

    <dv-border-box-12 class="bc-chart-item">
     <div style="display:flex; flex-direction: column;">
        <div style="display: flex; align-items: center;">
          <dv-decoration-9 style="width:25px;height:25px;"></dv-decoration-9>
          <div class="bc-header">天气情况</div>
        </div>
       <div class="c-container">
        <BottomDay></BottomDay>
       </div>
      </div>
    </dv-border-box-12>

    <dv-border-box-12 class="bc-chart-item">
      <div style="display: flex; flex-direction: column;">
        <div style="display: flex; align-items: center;">
          <dv-decoration-9 style="width:25px;height:25px;"></dv-decoration-9>
          <div class="bc-header">日增长排行</div>
        </div>
        <div style="margin-top: 10px;">
          <dv-scroll-board :config="config" style="width:350px;height:180px" />
        </div>
      </div>
    </dv-border-box-12>
  </div>
</template>

<script>
// import LabelTag from './LabelTag'
import BottomData from './BottomData.vue';
import BottomDay from './BottomDay.vue';

export default {
  name: 'BottomCharts',
  components: {
    BottomData, // 注册组件
    BottomDay
    // LabelTag
  },
  data () {
    return {
      config: {
        header: ['排名', '蜂箱号', '增长率'],
        data: [
          ['1', '01', '1.5%'],
          ['2', '02', '1.5%'],
          ['3', '03', '1.5%'],
          ['4', '04', '1.7%'],
          ['5', '05', '1.5%'],
          ['6', '06', '5.5%'],
          ['7', '07', '1.8%']
        ]
      }
    }
  }
}
</script>

<style lang="less">
.bottom-charts {
  width: 100%;
  height: 100%;
  display: flex;

  .bc-chart-item {
    display: flex;
    flex-direction: column; /* 使标题和内容垂直排列 */
    justify-content: flex-start; /* 垂直对齐到顶部 */
    align-items: flex-start; /* 水平对齐到左边 */
    width: 34%;
    height: 100%;
    padding: 0; /* 移除内边距 */
    box-sizing: border-box;

    .content-container {
    flex: 1; /* 使内容区域自适应剩余空间 */
    display: flex;
    justify-content: center; /* 内容水平居中 */
    align-items: center; /* 内容垂直居中 */
    }

     .c-container {
    flex: 1; /* 使内容区域自适应剩余空间 */
    display: flex;
    justify-content: center; /* 内容水平居中 */
    align-items: center; /* 内容垂直居中 */
    margin-bottom: 40px;
    }

    .bc-header {
      text-indent: 8px;
      font-size: 18px;
      font-weight: bold;
      margin: 0; /* 确保没有外边距 */
      color: rgb(81, 119, 243);
    }
  }

  /* 其他样式保持不变 */
  .bcci-header {
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
  }

  .dv-active-ring-chart {
    height: calc(~"100% - 80px");
  }

  .label-tag {
    height: 30px;
  }

  .active-ring-name {
    font-size: 18px !important;
  }

  .decoration-1,
  .decoration-2,
  .decoration-3 {
    display: absolute;
    left: 0%;
  }
}
</style>
